<template>
	<view
		class="tui-tabs-view"
		:class="[isFixed ? 'tui-tabs-fixed' : 'tui-tabs-relative', unlined ? 'tui-unlined' : '']"
		:style="{
			width: tabsWidth + 'px',
			height: height + 'rpx',
			padding: `0 ${padding}rpx`,
			background: backgroundColor,
			top: isFixed ? top + 'px' : 'auto',
			zIndex: isFixed ? zIndex : 'auto'
		}"
		v-if="tabsWidth > 0"
	>
		<view v-for="(item, index) in tabs" :key="index" class="tui-tabs-item" :style="{ width: itemWidth }" @tap.stop="swichTabs(index)">
			<view
				class="tui-tabs-title"
				:class="{ 'tui-tabs-active': currentTab == index, 'tui-tabs-disabled': item.disabled }"
				:style="{
					color: currentTab == index ? selectedColor : color,
					fontSize: size + 'rpx',
					fontWeight: bold && currentTab == index ? 'bold' : 'normal'
				}"
			>
				{{ item.name }}
				<view :class="[item.isDot ? 'tui-badge__dot' : 'tui-tabs__badge']" :style="{ color: badgeColor, backgroundColor: badgeBgColor }" v-if="item.num || item.isDot">
					{{ item.isDot ? '' : item.num }}
				</view>
			</view>
		</view>

		<view
			class="tui-tabs-slider"
			:style="{
				transform: 'translateX(' + scrollLeft + 'px)',
				width: sliderWidth + 'rpx',
				height: sliderHeight + 'rpx',
				borderRadius: sliderRadius,
				bottom: bottom,
				background: sliderBgColor,
				marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
			}"
		></view>
	</view>
</template>

<script setup>
import { ref, watch, onBeforeMount, onMounted } from 'vue'

const emit = defineEmits(['change'])

const props = defineProps({
	//标签页
	tabs: {
		type: Array,
		default() {
			return []
		}
	},
	//tabs宽度，不传值则默认使用windowWidth，单位px
	width: {
		type: Number,
		default: 0
	},
	//rpx
	height: {
		type: Number,
		default: 80
	},
	//rpx 只对左右padding起作用，上下为0
	padding: {
		type: Number,
		default: 30
	},
	//背景色
	backgroundColor: {
		type: String,
		default: '#FFFFFF'
	},
	//是否固定
	isFixed: {
		type: Boolean,
		default: false
	},
	//px
	top: {
		type: Number,
		// #ifndef H5
		default: 0,
		// #endif

		// #ifdef H5
		default: 44
		// #endif
	},
	//是否去掉底部线条
	unlined: {
		type: Boolean,
		default: false
	},
	//当前选项卡
	currentTab: {
		type: Number,
		default: 0
	},
	//滑块宽度
	sliderWidth: {
		type: Number,
		default: 68
	},
	//滑块高度
	sliderHeight: {
		type: Number,
		default: 6
	},
	//滑块背景颜色
	sliderBgColor: {
		type: String,
		default: '#5677fc'
	},
	sliderRadius: {
		type: String,
		default: '50rpx'
	},
	//滑块bottom
	bottom: {
		type: String,
		default: '0'
	},
	//标签页宽度
	itemWidth: {
		type: String,
		default: '25%'
	},
	//字体颜色
	color: {
		type: String,
		default: '#666'
	},
	//选中后字体颜色
	selectedColor: {
		type: String,
		default: '#5677fc'
	},
	//字体大小
	size: {
		type: Number,
		default: 28
	},
	//选中后 是否加粗 ，未选中则无效
	bold: {
		type: Boolean,
		default: false
	},
	//角标字体颜色
	badgeColor: {
		type: String,
		default: '#fff'
	},
	//角标背景颜色
	badgeBgColor: {
		type: String,
		default: '#F74D54'
	},
	zIndex: {
		type: [Number, String],
		default: 996
	}
})

let winWidth = ref(0)
let tabsWidth = ref(0)
let scrollLeft = ref(0)

watch(
	() => props.currentTab,
	nVal => {
		checkCor()
	}
)

watch(
	() => props.tabs,
	nVal => {
		checkCor()
	}
)

watch(
	() => props.width,
	nVal => {
		tabsWidth.value = nVal
		checkCor()
	}
)

onBeforeMount(() => {
	// 高度自适应
	setTimeout(() => {
		uni.getSystemInfo({
			success: res => {
				winWidth.value = res.windowWidth
				tabsWidth.value = props.width === 0 ? winWidth.value : props.width
				checkCor()
			}
		})
	}, 0)
})

const checkCor = () => {
	let tabsNum = props.tabs.length
	let padding = (winWidth.value / 750) * props.padding
	let width = tabsWidth.value - padding * 2
	let left = (width / tabsNum - (winWidth.value / 750) * props.sliderWidth) / 2 + padding
	// let scrollLeft = left
	if (props.currentTab > 0) {
		left = left + (width / tabsNum) * props.currentTab
	}
	scrollLeft.value = left
}

// 点击标题切换当前页时改变样式
const swichTabs = index => {
	let item = props.tabs[index]
	if (item && item.disabled) return
	if (props.currentTab === index) {
		return false
	} else {
		emit('change', {
			index: Number(index)
		})
	}
}
</script>

<style lang="scss" scoped>
.tui-tabs-view {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-tabs-relative {
	position: relative;
}

.tui-tabs-fixed {
	position: fixed;
	left: 0;
}

.tui-tabs-fixed::before,
.tui-tabs-relative::before {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #eaeef1;
	-webkit-transform: scaleY(0.5) translateZ(0);
	transform: scaleY(0.5) translateZ(0);
	transform-origin: 0 100%;
	bottom: 0;
	right: 0;
	left: 0;
}

.tui-unlined::before {
	border-bottom: 0 !important;
}

.tui-tabs-item {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.tui-tabs-disabled {
	opacity: 0.6;
}

.tui-tabs-title {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 3;
	overflow: visible;
}

.tui-tabs-active {
	transition: all 0.15s ease-in-out;
}

.tui-tabs-slider {
	position: absolute;
	left: 0;
	transition: all 0.15s ease-in-out;
	z-index: 1;
	transform-style: preserve-3d;
}

.tui-tabs__badge {
	position: absolute;
	font-size: 24rpx;
	height: 32rpx;
	min-width: 20rpx;
	padding: 0 6rpx;
	border-radius: 40rpx;
	right: 0;
	top: 0;
	transform: translate(88%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: 4;
	font-weight: normal !important;
}

.tui-badge__dot {
	position: absolute;
	height: 16rpx;
	width: 16rpx;
	border-radius: 50%;
	right: -10rpx;
	top: -10rpx;
	z-index: 4;
}
</style>
